<template>
	<view>
		<!-- <view class="add">
			<view class="item" @click="BabyAdd()">
				<image src="/static/images/append-baby.png" mode=""></image>
				<text>{{$t(`添加宝宝`)}}</text>
			</view>
			<view class="item" @click="BabyShop()">
				<image src="/static/images/query.png" mode=""></image>
				<text>{{$t(`信息查询`)}}</text>
			</view>
		</view> -->
		<view class="baby-pop" @click="toggle('bottom')">
			<view class="left">
				<text class="title">生长曲线</text>
				<text class="describe">监测孩子生长趋势，快来记录吧</text>
			</view>
			<view class="right">
				<image src="/static/images/baby-view.png" mode=""></image>
			</view>
		</view>
		<!-- 宝宝列表弹框 -->
		<uni-popup 
		  ref="popup"
		  border-radius="16rpx 16rpx 0 0"
		  background-color="#F5F5F5" 
		  @change="change">
			<view class="Pop">
				<view class="Header">
				   <view class="Hadd" @click="BabyAdd()">
				   	   <image src="/static/images/add_baby.png" mode=""></image>
				       <text class="Txt">添加</text>
				   </view>
				   <view class="Htitle">
				   	    选择一位宝宝
				   </view>
				</view>
				<!-- 滑动 -->
				<scroll-view scroll-y="true" class="ScrollView">
					<view class="baby-Records">
						<view class="baby" @click="BabyDetail(item)" v-for="(item,index) in BabyList" :key="index">
							<view class="active">
								<image :src="item.avatar" mode=""></image>
							</view>
							<view class="Records">
								<view class="info">
									<text class="name">{{item.real_name}}({{item.age_text}})</text>
									<text class="day">{{$t(`出生日期:`)}}{{formatDate(item.birthday_text)}}</text>
								</view>
								<view class="more">
									<image src="/static/images/baby-view.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="loadingicon acea-row row-center-wrapper" v-if="BabyList.length > 0">
						<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
						{{ loadTitle }}
					</view>
					<view v-if="BabyList.length == 0">
						<emptyPage v-if="!loading" :title="$t(`暂无宝宝记录`)"></emptyPage>
						<view class="loadingicon acea-row row-center-wrapper">
							<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
		
		<!-- <tabBar v-if="!is_diy" :pagePath="'/pages/baby/baby'"></tabBar>
		<pageFooter v-else></pageFooter> -->
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import { MyBaby } from '@/api/baby.js';
	import tabBar from "@/pages/index/visualization/components/tabBar.vue";
	import pageFooter from '@/components/pageFooter/index.vue';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			tabBar,
			pageFooter,
			emptyPage,
		},
		data() {
			return {
				is_diy:uni.getStorageSync('is_diy'),
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: this.$t(`加载更多`), //提示语
				BabyList:[],
				page:1,
				limit:10,
			}
		},
		onShow() {
			//获取宝宝列表
			this.page = 1;
			this.BabyList = [];
			this.loadend = false;
			this.babyList()
		},
		onPullDownRefresh() {
			//获取宝宝列表
			this.page = 1;
			this.BabyList = [];
			this.loadend = false;
			this.babyList()
		},
		onReachBottom: function() {
			this.babyList()
		},
		methods: {
			/* 时间格式处理 */
			formatDate:function(dateStr) {
			     // 将字符串转换为Date对象  
			    const date = new Date(dateStr);  
			    // 提取年月日并格式化为字符串  
			    const year = date.getFullYear();  
			    const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要+1  
			    const day = ('0' + date.getDate()).slice(-2); // 保证是两位数  
			    // 拼接回年月日的格式 
			    return `${year}-${month}-${day}`;  
			},
			/* 弹出层 */
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type){
				this.$refs.popup.open(type)
			},
			/* 宝宝年龄计算 */
			displayAge:function (birthDate) {  
			    // 将出生日期转换为Date对象  
			    const birth = new Date(birthDate);  
			    // 获取当前日期  
			    const now = new Date();  
			  
			    // 计算年份差  
			    const yearsDiff = now.getFullYear() - birth.getFullYear();  
			  
			    // 如果年份差大于0，计算月份差以处理跨年但未满1年的情况  
			    let monthsDiff = yearsDiff * 12 + now.getMonth() - birth.getMonth();  
			  
			    // 如果月份差小于0，说明实际上还没满完整的年份差，需要调整年份差和月份差  
			    if (monthsDiff < 0) {  
			        monthsDiff += 12; // 加回12个月，并减少年份差  
			        yearsDiff--; // 减去年份差  
			    }  
			  
			    // 如果月份差大于或等于12，则使用年份差作为年龄  
			    if (monthsDiff >= 12) {  
			        return `${yearsDiff}岁`;  
			    } else {  
			        // 如果月份差小于12，则按月显示年龄  
			        return `${monthsDiff}个月`;  
			    }  
			},
			/**
			 * 获取订单列表
			 */
			babyList:function(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				MyBaby({
					page:that.page,
					limit:that.limit
				}).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.BabyList = that.$util.SplitArray(list, that.BabyList);
					that.$set(that, 'BabyList', that.BabyList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.page = that.page + 1;
					uni.stopPullDownRefresh();
				}).catch(err => {
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			BabyShop(){
				uni.navigateTo({url:'/pages/babys/query'})
			},
			BabyAdd(){
				uni.navigateTo({url:'/pages/babys/babys'})
			},
			BabyDetail(item){
				uni.navigateTo({url:'/pages/babys/grow_records?parms=' + JSON.stringify(item)})
			}
		}
	}
</script>

<style lang="scss">
.Pop{
	width: 100%; 
	height: 600rpx;
	.ScrollView{
		width: 100%;
		margin: 24rpx 0 0 0;
		height: 400rpx;
		.baby-Records{
			margin: 16rpx 0 16rpx 0;
			display: flex;
			flex-direction: column;
			.baby{
				border-radius: 16rpx;
				margin: 16rpx auto 0 auto;
				background:#FFFFFF;
				width: 686rpx;
				display: flex;
				align-items: center;
				padding: 4rpx 36rpx;
				.Records{
					display: flex;
					padding: 24rpx 0;
					justify-content: space-between;
					flex: 5;
					align-items: center;
					.more{
						width: 36rpx;
						height: 36rpx;
						image{
							width: 36rpx;
							height: 36rpx;
						}
					}
					.info{
						display: flex;
						flex-direction: column;
						.day{
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #858585;
						}
						.name{
							padding: 0 0 8rpx 0;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #1A1A1A;
						}
					}
				}
				
				.active{
					display: flex;
					flex: 1;
					width: 88rpx;
					height: 88rpx;
					image{
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.Header{
		display: flex;
		align-items: center;
		padding: 12rpx 24rpx 0 24rpx;
		.Htitle{
			font-weight: bold;
			font-size: 32rpx;
			color: #1A1A1A;
			padding: 0 0 0 130rpx;
		}
		.Hadd{
			display: flex;
			align-items: center;
			.Txt{
				font-weight: 500;
				font-size: 32rpx;
				color: #1A1A1A;
			}
			image{
				width: 52rpx;
				height: 52rpx;
			}
		}
	}
}	
.baby-pop{
	background: #FFFFFF;
	width: 686rpx;
	border-radius: 12rpx;
	margin: 24rpx auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 36rpx;
	box-shadow: 2px 2px 6px 1px rgba(0,0,0,0.05);
	.right{
		width: 36rpx;
		height: 36rpx;
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.left{
		display: flex;
		flex-direction: column;
		.title{
			padding: 0 0 12rpx 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #1A1A1A;
		}
		.describe{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #1A1A1A;
		}
	}
}	
	
.add{
	background: #FFFFFF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 24rpx 0;
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 42rpx;
			height: 42rpx;
			margin: 0 0 16rpx 0;
		}
		text{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #1A1A1A;
		}
	}
}
</style>
